<template>
	<view>
		<u-mask :show="show" @click="show = false" :mask-click-able=false>
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="close" @click="show = false">X</view>
					<view class="title">
						是否兑换
					</view>
					<view class="little">
						现有六张月卡优惠券，兑换需使用<text class="num">{{num}}</text>张
					</view>
					<view class="couponContent">
						<view class="coupon_left">
							<view class="left_container">
								<view class="contentBox">
									<text class="icon">￥</text><text class="vipMonth">{{vipMonth}}</text>
									<view class="noDoor">
										无门槛
									</view>
								</view>
								<view class="text">
									月卡红包
								</view>
							</view>
						</view>
						<image src="../../static/index/to.png" mode=""></image>
						<view class="coupon_right">
							<view class="right_container">
								<view class="contentBox">
									<text class="icon">￥</text>
									<text class="vipMonth">{{busMoney}}</text>

									<view class="noDoor">
										无门槛
									</view>
								</view>
								<view class="text">
									<!-- {{busName}} -->
									{{arrlist.site_name}}
								</view>
							</view>
						</view>
					</view>
					<button class="uniButton" type="primary" @click="confirmExchange">确认兑换</button>
				</view>
			</view>
		</u-mask>

		<u-popup v-model="showCoupon" mode="bottom" border-radius="18" height="989rpx" :closeable="true">

			<view class="content_Cert">
				<view class="title">红包优惠</view>
				<view class="lineTwo">
					<text class="left_title">外卖红包</text>
					<text class="right_title">每单限一张，可叠加其他红包卡劵</text>
				</view>
			</view>
			<view class="">
				<view class="main-item member">
					<view class="member">
						<view class="centent flexjcsb">
							<view class="threshold">
								<view class=""> ￥<text>5</text> </view>
								<view class="preferentialThreshold">
									<text>无门槛</text>
								</view>
							</view>
							<view class="certificate">
								<view class="certificate-title"> 月卡会员红包 </view>
								<view class="certificate-date">
									<text>2023.02.12</text>
									<text>~</text>
									<text>2023.08.12</text>
								</view>
							</view>
							<view class="centent-status">
								<view class=""> 立即 </view>
								<view class=""> 使用 </view>
							</view>
						</view>
					</view>
				</view>
				<!--  -->
				<view class="main-item">
					<view class="notUsed">
						<view class="centent flexjcsb">
							<view class="threshold">
								<view class=""> ￥<text>5</text> </view>
								<view class="preferentialThreshold">
									<text>无门槛</text>
								</view>
							</view>
							<view class="certificate">
								<view class="certificate-title"> 月卡会员红包 </view>
								<view class="certificate-date">
									<text>2023.02.12</text>
									<text>~</text>
									<text>2023.08.12</text>
								</view>
							</view>
							<view class="centent-status">
								<view class=""> 立即 </view>
								<view class=""> 使用 </view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="left_title">
				优惠活动
			</view>
			<view class="shopTextContent" v-for="(item,index) in list" :key="index">
				<text class="shopTitle">{{item.title}}</text><text class="shopText">{{item.text}}</text>
			</view>
			<view class="notice">
				公告：超级人气饮料回归！西瓜清凉一夏
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import whole from "../../pages_my/components/giveServiceTo/coupon/whole.vue";
	// import whole from "../../pages_my/components/giveServiceTo/coupon/whole.vue"
	const $api = require('@/utils/request.js').API
	export default {
		// props:{
		// 	busMoney:{
		// 		type:Number,
		// 		default:false
		// 	},
		// 	busName:{
		// 		type:String,
		// 		default:false
		// 	},
		// 	vipMonth:{
		// 		type:Number,
		// 		default:false
		// 	},
		// 	num:{
		// 		type:Number,
		// 		default:false
		// 	}
		// },
		props: ['arrlist'],
		data() {
			return {
				show: false,
				showCoupon: false,
				arr: [],
				list: [{
						title: '满减',
						text: '满30元减10元，满56元减33元，满100元减39元'
					},
					{
						title: '首单',
						text: '首单减5元'
					},
					{
						title: '配送',
						text: '配送费  满2减1'
					},
				]
			}
		},
		components: {
			// whole
		},
		watch: {
			arrlist: {
				immediate: true,
				handler(val) {
					this.arr = val
				}
			}
		},
		mounted() {
			this.couponList()
		},
		methods: {
			couponList() {
				$api.postCouponList({
					site_id: this.arr.site_id,
					can_receive: 0,
				}).then(res => {
				})
			},
			// 确认兑换
			confirmExchange() {
				this.show = false;
				this.showCoupon = true
			}
		}
	}
</script>

<style lang="less" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.rect {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 75%;
			height: 737rpx;
			background: #FFFFFF;
			border-radius: 40rpx;

			.close {
				position: absolute;
				top: 44rpx;
				right: 56rpx;
				color: #8A8A8A;
			}

			.title {
				margin-top: 48rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #161415;
			}

			.little {
				margin-top: 40rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #7C7C7C;

				.num {
					color: #E74D0A
				}
			}

			.couponContent {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 22rpx;

				img {
					margin: 32rpx 15rpx 0 26rpx;
					width: 96rpx;
					height: 64rpx;
				}

				image {
					margin: 32rpx 15rpx 0 26rpx;
					width: 96rpx;
					height: 64rpx;
				}

				.coupon_right {
					position: relative;
					margin-top: 47px;
					width: 230rpx;
					height: 235rpx;
					background: #F2CB7C;
					border-radius: 23rpx;

					.right_container {
						position: absolute;
						top: -22rpx;
						left: 19rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						width: 194rpx;
						height: 247rpx;
						background: #FFE4AC;
						border-radius: 23rpx;

						.contentBox {
							margin-top: 26rpx;

							.icon {
								font-size: 33rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #836220;
								line-height: 33rpx;
							}

							.vipMonth {
								font-size: 79rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #836220;
								line-height: 80rpx;
							}

						}

						.noDoor {
							font-size: 29rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #8A6928;
							line-height: 50rpx;
						}

						.text {
							width: 100%;
							text-align: center;
							line-height: 81rpx;
							height: 81rpx;
							background: #F2CB7C;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #8F6714;
						}
					}
				}

				.coupon_left {
					position: relative;
					margin-top: 47px;
					width: 160rpx;
					height: 179rpx;
					background: #F2CB7C;
					border-radius: 23rpx;

					.left_container {
						position: absolute;
						top: -17rpx;
						left: 13rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						width: 135rpx;
						height: 189rpx;
						background: #FFE4AC;
						border-radius: 23rpx;

						.contentBox {
							margin-top: 24rpx;

							.icon {
								font-size: 25rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #836220;
								line-height: 33rpx;
							}

							.vipMonth {
								font-size: 60rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #836220;
								line-height: 60rpx;
							}

						}

						.noDoor {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #8A6928;
							line-height: 30rpx;
						}

						.text {
							width: 100%;
							text-align: center;
							line-height: 81rpx;
							height: 81rpx;
							background: #F2CB7C;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #8F6714;
						}
					}
				}
			}
		}
	}

	.content_Cert {
		position: relative;
		font-weight: 400;

		.title {
			height: 107rpx;
			line-height: 107rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #161415;
		}

		.lineTwo {
			margin-bottom: 20rpx;
		}

		.right_title {
			margin-left: 10rpx;
			font-size: 18rpx;
			color: #7C7C7C;
		}

	}

	.left_title {
		margin: 30rpx 0 0 30rpx;
		font-size: 28rpx;
		color: #161415;
	}

	.shopTextContent {
		margin: 15rpx 0 15rpx 30rpx;

		.shopTitle {
			display: inline-block;
			width: 73rpx;
			height: 38rpx;
			border: 1px solid #E54202;
			opacity: 0.52;
			border-radius: 3rpx;
			text-align: center;
			font-size: 22rpx;
			color: #F14500;
		}

		.shopText {
			margin-left: 12rpx;
			font-size: 22rpx;
			color: #7C7C7C;
		}
	}

	.notice {
		margin-left: 30rpx;
		height: 100rpx;

		font-size: 24rpx;
		color: #9E9E9E;
	}

	// 优惠券
	// 会员
	.member {
		width: 708rpx;
		height: 208rpx;
		background-image: url('../../static/my/giveServiceTo/member.png');
		background-size: 100% 100%;
		margin: auto;
	}

	// 未使用
	.notUsed {
		width: 708rpx;
		height: 208rpx;
		background-image: url("../../static/my/giveServiceTo/notUsed.png");
		background-size: 100% 100%;
		margin: auto;

		.threshold {
			border-right: 2rpx dashed #d2d2d2;
		}
	}

	.main-item {
		.centent {
			// position: absolute;
			width: 100%;
			height: 100%;

			// 门槛
			.threshold {
				width: 250rpx;
				text-align: center;
				font-size: 27rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #836220;

				view:first-child {
					text {
						font-size: 67rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #836220;
					}
				}

				view:last-child {
					color: #f14500;
					text-align: center;
				}

				.preferentialThreshold {
					color: #8a6928 !important;
				}
			}

			// 指定
			.certificate {
				.certificate-title {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.certificate-date {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #836220;

					text {
						padding: 0 6rpx;
					}
				}
			}

			// 状态
			.centent-status {
				width: 100rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
				// line-height: 32rpx;
				text-shadow: 0rpx 1rpx 1rpx rgba(182, 140, 255, 0.5);
				padding-left: 20rpx;
			}
		}
	}
</style>